<template>
  <view>
    <view class="tab-botton flex-col container">
      <view class="flex-col group">
        <view class="section_1"> </view>
        <view class="flex-col section_2">
          <view class="justify-center group_1">
            <image src="/static/local/16309129036418913521.png" class="image_2" />
          </view>
          <view class="flex-col group_4">
            <view class="justify-between group_5">
              <text class="text_4" @click="$api.leftBack()">&lt;</text>
              <text class="text_5" @click="onRule">
                <image src="/static/wh.png"></image>
                积分规则</text>
            </view>
            <div class="container1">
              <div class="dvs">
                <p>剩余积分</p>
                <p>{{ potion.userPoint  }}</p>
              </div>
              <div class="wave"></div>
            </div>

          </view>
          <view class="flex-col items-center button">
            <view class="group_7"> </view>
            <text class="text_8">活力值:{{ potion.userVit  }}</text>
          </view>
        </view>
      </view>
      <view class="flex-col line-tabs">
        <view class="flex-col items-center section_4">
          <view class="flex-row">
            <text class="text_10" :class="{text_9:activeIndex==0}"
                  @click="onTab(0)"
            >获得积分记录</text>
            <text class="text_10" :class="{text_9:activeIndex==1}"
                  @click="onTab(1)"
            >消费积分记录</text>
          </view>
        </view>
        <view class="flex-col section_5">
          <view class="flex-col list">
            <template v-for="(item, i) in list6yl8o2XS">
              <view class="list-item justify-between" :key="'item' + i">
                <view class="flex-col">
                  <text class="text_11">
                  {{activeIndex==0?configPontText[i].name:`抢福利`}}
                  </text>
                  <text class="text_13">{{item.createTime}}</text>
                </view>
                <text class="text_15">{{activeIndex==0?'+':'-'}}{{activeIndex==0?item.userPoint:item.point}}</text> </view
              >
            </template>
            <u-loadmore :status="status" :icon-type="iconType" @loadmore="loadmore"/>
          </view>
        </view>


      </view>
    </view>
    <tabs-box></tabs-box>
    <u-popup border-radius="10" closeable v-model="show" mode="center">
      <view class="models">
        <view v-for="(k,v) in delContent" :key="v">
          {{v+1}}.{{k}}
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
import { gpUserPointRecordList,gpMoveUserPointRecordList } from '@/api/point'
import { gpUserInfo } from '@/common/request.js'
const  pointConfig ={
  potionName:'积分获取规则',
  potionText: [
    '注册+20分；',
    '每日首次登录/打开平台+2分；',
    '预约活动+2分（每日限1次）；',
    // '学习视频每10分钟+1分（一天最多3分）；',
    '投票+1分；',
    // '加入群团组织+10分；',
    '浏览风采展1次+1分（一天最多3分）；',
    '加入群团组织+10分；',
    '活动签到1次+3分；',
    '观看视频每1分钟+1分（一天最多3分）；',
    '预约阵地1次+2分（每日限1次）；',
    '阵地签到1次 +3分 。',
  ],
  configPontText : [
    '注册',
    '登陆',
    '活动报名',
    '投票',
    '加入群团组织',
    '参加志愿服务',
    '捐款',
    '浏览风采',
    '建言采纳',
    '活动签到',
    '观看视频',
    '阵地预约',
    '阵地签到',
  ]
}

export default {
  data() {
    return {
      iconType: 'flower', //加载图标样式
      status: 'loadmore', //加载的状态
      isLoading: false, //是否要加载数据
      show:false,//更多数据
      delContent:[],//规则数据
      potion:{},//上一个页过来的数据
      pageNo: 1, //第几页
      pageSize: 60, //每页条数
      list6yl8o2XS: [] ,//列表
      activeIndex:0,//切换项
    };
  },
  onLoad(opt){
    this.gpUserInfo()
    this.gpUserPointRecordCb(gpUserPointRecordList)
  },
  computed: {
    //规则数据
    configPontText(){
      const configPontText = pointConfig.configPontText
      const list =[]
      configPontText.map((k,v)=>{
        list.push({
          name:k,index:v+1
        })
      })
      const l = []
      this.list6yl8o2XS.map(item=>{
        const type =item.type
        return list.map(c=>{
         if(type===c.index){
           l.push({name:c.name})
         }
        })
      })
      return l
    }
  },
  methods: {
    gpUserInfo(){
      gpUserInfo().then(res=>{
         this.potion = res.result
      }).catch(e=>{
        console.log ( e )
      })
    },
    loadmore() {
      // 每次出发该方法，都要使页数加一
      this.pageNo++
      if(this.activeIndex===0){
        this.gpUserPointRecordCb(gpUserPointRecordList)
      } else {
        this.gpUserPointRecordCb(gpMoveUserPointRecordList)
      }
    },
    //列表数据
    async gpUserPointRecordCb(cb) {
      const params = {
        pageNo: this.pageNo,
        pageSize: this.pageSize,
      }
      if (this.isLoading) {
        return
      }
      this.isLoading = true
      this.status = 'loading'
      uni.showLoading({
        title: '列表加载中...',
      })
      const {
        code,
        result: { records: list, total },
      } = await cb(params)
      if (code === 200) {
        this.isLoading = false
        uni.hideLoading()
        if (!list.length) {
          this.status = 'nomore'
        } else {
          this.status = 'loadmore'
          this.list6yl8o2XS = [...this.list6yl8o2XS, ...list]
          if (this.list6yl8o2XS.length >= total) {
            this.status = 'nomore'
          }
        }
      } else {
        this.status = 'nomore'
      }
    },
    //重置
    onRestFn(){
      this.pageNo = 1
      this.status = 'loadmore'
      this.isLoading = false
      this. list6yl8o2XS = []
    },
    //规则
    onRule(){
      this.delContent = pointConfig.potionText
      this.show = true
    },
    //切换索引
    onTab(v){
      this.activeIndex = v
      this.onRestFn()
      if(v===0){
        this.gpUserPointRecordCb(gpUserPointRecordList)
      } else {
        this.gpUserPointRecordCb(gpMoveUserPointRecordList)
      }
    }
  },
  //加载到底部进行请求新的数据
  onReachBottom() {
    if (this.status === 'loadmore') {
      this.loadmore()
    }
  },
};
</script>

<style scoped lang="scss">
.container {
  top:-10px;
  background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/612497710e6387001103f531/613066dc630da20011bec9f4/16309129006753341931.png');
  background-position: 0rpx 0rpx;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  .group {
    padding-top: 40rpx;
    position: relative;
    .section_1 {
      background-color: rgb(255, 255, 255);
      min-height: 519rpx;
    }
    .section_2 {
      padding: 10rpx 8rpx 43rpx 13rpx;
      background-image: linear-gradient(0deg, #2473ea, #36b0fb);
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      .group_1 {
        padding-bottom: 3rpx;
        position: relative;
        .group_2 {
          color: rgb(0, 0, 0);
          font-size: 22rpx;
          line-height: 22rpx;
          letter-spacing: -0.56rpx;
          white-space: nowrap;
          position: absolute;
          left: 0;
          top: 50%;
          transform: translateY(-50%);
          .image {
            margin: 3rpx 0 9rpx;
            width: 67rpx;
            height: 11rpx;
          }
          .text {
            margin-left: 10rpx;
          }
          .image_1 {
            margin-left: 5rpx;
            margin-bottom: 4rpx;
            width: 25rpx;
            height: 19rpx;
          }
        }
        .group_3 {
          line-height: 26rpx;
          white-space: nowrap;
          .text_1 {
            color: rgb(0, 0, 0);
            font-size: 26rpx;
            font-weight: 700;
            line-height: 20rpx;
          }
          .text_2 {
            color: rgb(0, 0, 0);
            font-size: 26rpx;
            font-weight: 700;
            line-height: 20rpx;
          }
          .text_3 {
            color: rgb(0, 0, 0);
            font-size: 26rpx;
            font-weight: 700;
            line-height: 20rpx;
          }
        }
        .image_2 {
          position: absolute;
          right: 4rpx;
          top: 50%;
          transform: translateY(-50%);
          width: 50rpx;
          height: 19rpx;
        }
      }
      .group_4 {
        margin-top: 33rpx;
        padding-left: 8rpx;
        height: 339rpx;
        .group_5 {
          .text_4 {
            color: #fff;
            font-size: 30rpx;
            font-weight: 700;
            line-height: 60rpx;
            white-space: nowrap;
          }
          .text_5 {
            color: rgb(255, 255, 255);
            font-size: 26rpx;
            line-height: 60rpx;
            white-space: nowrap;
            image{
              width:27rpx;
              height: 27rpx;
              margin-right: 18rpx;
              vertical-align: middle;
            }
          }
        }
        .section_3 {
          padding: 54rpx 12rpx 4rpx 34rpx;
          align-self: center;
          background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/612497710e6387001103f531/613066dc630da20011bec9f4/16309129013167496104.png');
          background-position: 0rpx 0rpx;
          background-size: 100% 100%;
          background-repeat: no-repeat;
          width: 287rpx;
          .text_6 {
            align-self: center;
            color: rgb(255, 255, 255);
            font-size: 29rpx;
            line-height: 29rpx;
            white-space: nowrap;
          }
          .group_6 {
            margin-top: 34rpx;
            color: rgb(255, 255, 255);
            font-size: 91rpx;
            line-height: 68rpx;
            white-space: nowrap;
            .text_7 {
              align-self: center;
            }
            .image-wrapper {
              margin-top: 10rpx;
              background-image: url('https://codefun-proj-user-res-1256085488.cos.ap-guangzhou.myqcloud.com/612497710e6387001103f531/613066dc630da20011bec9f4/16309129014166699811.png');
              background-size: 100% 100%;
              background-repeat: no-repeat;
              .image_3 {
                width: 244rpx;
                height: 90rpx;
              }
            }
          }
        }
      }
      .button {
        margin-top: 40rpx;
        color: rgb(255, 255, 255);
        font-size: 26rpx;
        line-height: 26rpx;
        white-space: nowrap;
        position: relative;
        .group_7 {
          opacity: 0.7;
          border-radius: 9rpx;
          width: 254rpx;
          height: 62rpx;
        }
        .text_8 {
        }
      }
    }
  }
  .line-tabs {
    .section_4 {
      padding: 31rpx 0 43rpx;
      background-color: rgb(255, 255, 255);
      .text_10 {
        color: rgb(102, 102, 102);
        font-size: 32rpx;
        line-height: 32rpx;
        white-space: nowrap;
      }
      .text_9 {
        color: rgb(36, 115, 234);
        font-size: 32rpx;
        line-height: 32rpx;
        white-space: nowrap;
        position: relative;
        &::before{
          position:absolute;
          content: '';
          background-color: rgb(36, 115, 234);
          border-radius: 1rpx;
          width: 115rpx;
          height: 3rpx;
          left: 50%;
          bottom: -43rpx;
          transform: translate(-50%,0);
        }
      }
    }
    .section_5 {
      padding-bottom: 60rpx;
      background-color: rgb(255, 255, 255);
      .list {
        margin-left: 13rpx;
        margin-right: 12rpx;
        padding-bottom: 2rpx;
        .list-item {
          padding: 39rpx 19rpx 29rpx 28rpx;
          border-top: solid 2rpx rgb(232, 232, 232);
          border-bottom: solid 2rpx rgb(232, 232, 232);
          .text_15 {
            align-self: center;
            color: rgb(255, 0, 0);
            font-size: 32rpx;
            line-height: 32rpx;
            white-space: nowrap;
          }
          .text_11 {
            color: rgb(34, 34, 34);
            font-size: 28rpx;
            line-height: 28rpx;
            white-space: nowrap;
          }
          .text_13 {
            margin-top: 28rpx;
            color: rgb(102, 102, 102);
            font-size: 26rpx;
            line-height: 26rpx;
            white-space: nowrap;
          }
        }
        .section_6 {
          margin-left: 138rpx;
          background-color: rgb(36, 115, 234);
          border-radius: 1rpx;
          width: 113rpx;
          height: 3rpx;
        }
      }
    }
  }
}
.models{
  padding:0 30rpx;
  view{
    padding:30rpx 0;
    font-size: 26rpx;
  }
}
.container1 {
  position: absolute;
  width: 300rpx;
  height: 300rpx;
  padding: 5px;
  border: 5px solid rgba(118, 218, 255,.8);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  overflow: hidden;
  .dvs{
    position: relative;
    text-align: center;
    z-index: 111;
    color: #fff;
    p{
      font-family: PingFang;
      position:absolute;
      width: 100%;
      &:first-child{
        font-size: 29rpx;
        font-weight: 500;
        top:50rpx;
      }
      &:last-child{
        font-size: 91rpx;
        font-weight: bold;
        top:112rpx;
      }
    }
  }
}
.wave {
  position: relative;
  width: 100%;
  height: 400rpx;
  background-color: rgba(120,239,255,0.4);
  border-radius: 50%;
  position: relative;
  bottom: -11rpx;
  &::before,
  &::after{
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    top: 0;
    left: 50%;
    background-color: rgba(120,239,255,0.4);
    border-radius: 45%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 6s linear infinite;
    z-index: 10;
  }

  &::after {
    border-radius: 47%;
    transform: translate(-50%, -70%) rotate(0);
    animation: rotate 10s linear -5s infinite;
    background-color: RGBA(47, 154, 245, 1);
    z-index: 20;
  }
}

@keyframes rotate {
  50% {
    transform: translate(-50%, -73%) rotate(180deg);
  } 100% {
      transform: translate(-50%, -70%) rotate(360deg);
    }
}
</style>

<style scoped>
@import'@/style/global-css.css'
</style>
